<script setup lang="ts">
import { useRouter } from 'vue-router';
import post from '../../lib/post'
import { ref,type Ref } from 'vue'
import { ElMessageBox ,ElMessage } from 'element-plus';

import { storeToRefs } from 'pinia'
import { useUserInfoStore } from '@/stores/userinfo';   //导入用户信息状态库
const userInfoStore = useUserInfoStore()
const { user } = storeToRefs(userInfoStore)



const router = useRouter()
const userInfo: Ref<{ phone: string; password: string; gender: string; name: string; head: any }>= ref({
    phone:'17858984792',
    password:'123456',
    gender:'',
    head:'',
    name:''

})

console.log(user);

const toLogin = async () => {
    if(!userInfo.value.phone || !userInfo.value.password){
    //    return ElMessage.error('用户名或密码不能为空')
       return ElMessageBox.alert('用户名或密码不能为空')
    }
    const data: any = await post('/login', {
        phone: userInfo.value.phone,
        password: userInfo.value.password
    })
    if (!data.success) {
        return ElMessageBox.alert(data.message)
    } else {

        // 把userId存到本地储存中
        // localStorage.setItem('userId', data.result._id)

        // console.log(user);
        user.value = {
            phone:data.result.phone,
            userId:data.result.userId,
            password:data.result.password,
            gender:data.result.gender,
            head:data.result.head,
            name:data.result.name,
        }

        router.push('/')
        return ElMessageBox.alert('登录成功，已为你跳转至首页')
    }
}


// 点击跳转忘记密码页面
const toForGetPassword = ()=>{
    router.push('/forgetpassword')
}



</script>

<template>
    <div class="big">
        <div class="left"></div>
        <div class="right">
            <div class="form">
                <h1 class="title">登录</h1>

                <div class="input">
                    <p>用户名</p><input v-model="userInfo.phone" class="username" type="text" placeholder="请输入用户名">
                </div>
                <div class="input">
                    <p>密码</p><input v-model="userInfo.password" class="password" type="password" placeholder="请输入密码">
                </div>



                <div class="else">
                    <div class="elseLeft">
                        <div class="toRegister">注册页面</div>
                    </div>
                    <div class="elseRight">
                        <div class="toForGetPassword" @click="toForGetPassword()">忘记密码</div>
                    </div>
                </div>
                <button class="toLogin" @click="toLogin">登录</button>
            </div>
        </div>



    </div>
</template>

<style scoped>
.big {
    display: flex;
}

.left {
    width: 50vw;
    height: 100vh;
    background-color: #1081d6;
    border-radius: 0 1vw 1vw 0;
    /* background: url(../../assets/img/bgimg01.jpg) -50px 0; */
}

.toRegister {
    cursor: pointer;
}
.toForGetPassword{
    cursor: pointer;
}
.hint{
    color: red;
}
.input input {
    margin: 10px 0;
}

.username,
.password {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    text-indent: 1rem;
}

.username::placeholder,
.password::placeholder {
    text-indent: 1rem;
    color: #bbb;
    font-size: 16px;
}

.right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.right .form {
    box-sizing: border-box;
    width: 500px;
    height: 600px;
    /* background-color: #1081d6; */
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 50px 80px;
}

h1 {
    color: #1081d6;
    margin-bottom: 40px;
    font-size: 40px;
}

p {
    font-size: 18px;
    font-weight: 500;
}

.else {
    display: flex;
    justify-content: space-between;
    color: #1081d6;
    font-weight: 500;
}

.toLogin {
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    margin-top: 30px;
    width: 100%;
    height: 50px;
    background-color: #1081d6;
    border-radius: 4px;
    border: 0;
}
</style>